<template>
    <div style="width: 100%; height: 22vh;" ref="chart"></div>
  </template>
  
  <script>
  import * as echarts from 'echarts';
  
  export default {
    props: ['dailyfeedlist'],
    data() {
      return {
        myChart: null,
        option: {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              crossStyle: {
                color: '#999',
              },
            },
          },
          toolbox: {
            feature: {
              dataView: { show: true, readOnly: false },
              magicType: { show: true, type: ['line', 'bar'] },
              restore: { show: true },
              saveAsImage: { show: true },
            },
          },
          legend: {
            data: ['计划投饲量'],
            textStyle: {
              color: 'white',
            },
          },
          xAxis: {
            type: 'category',
            data: [], // 这里会填充日期
            axisPointer: {
              type: 'shadow',
            },
            axisLabel: {
              color: 'white',
            },
            axisLine: { // 添加或更新这个配置来改变坐标轴线的颜色  
              lineStyle: {  
                color: '#3ab8b7', // 修改为你想要的颜色  
              },  
            },  
          },
          yAxis: {
            type: 'value',
            fontSize: 13,
            name: '          每日计划投饲量 (g)',
            nameTextStyle: {
              color: "white",
              fontSize: 13,
            },
            splitLine: {
            show: true, // 显示网格线
            lineStyle: {
                // 网格线的样式
                color: 'transparent', // 颜色 transparent #7590b7
                type: 'dotted' // 类型
            }
           },
            // min: 0,
            // max: 100,
            // interval: 1000,
            axisLabel: {
              formatter: '{value} g',
              color: "white",
              fontSize: 10,
            },
            axisLine: { // 添加或更新这个配置来改变坐标轴线的颜色  
              lineStyle: {  
                color: '#3ab8b7', // 修改为你想要的颜色  
              },  
            },  
          },
          series: [
            {
              name: '计划投饲量',
              type: 'line',
              color: '#ffffbf',
              data: [13.0, 13.0, 13.3, 13.0, 13.0, 13,],// 这里会填充投饲量
              tooltip: {
                formatter: function (params) {
                  return params.name + ': ' + params.value + ' g';
                },
              },
            }
          ],
        },
      };
    },
    watch: {
      dailyfeedlist: {
        handler() {
          this.updateChartData();
        },
        deep: true
      },
    },
    mounted() {
      this.initChart();
      if (this.dailyfeedlist && this.dailyfeedlist.length > 0) {
        this.updateChartData();
      }
    },
    methods: {
      initChart() {
        this.myChart = echarts.init(this.$refs.chart);
        this.myChart.setOption(this.option);
      },
      updateChartData() {
        if (this.dailyfeedlist && Array.isArray(this.dailyfeedlist) && this.dailyfeedlist.length > 0) {
          let dates = [];
          let plannedFeedAmounts = [];
  
          // 处理 dailyfeedlist 数据
          this.dailyfeedlist.forEach((record) => {
            const date = new Date(record.plan_date).toLocaleDateString(); // 转换日期为本地字符串
            const plannedFeed = Number(record.daily_feed_amount || 0); // 假设 daily_feed_amount 是 dailyfeedlist 中的字段
            
            dates.push(date);
            plannedFeedAmounts.push(plannedFeed);
          });
  
          // 使用新数据更新图表
          this.myChart.setOption({
            xAxis: {
              data: dates,
            },
            series: [{
              data: plannedFeedAmounts,
            }]
          });
        } else {
          this.myChart.setOption({
        xAxis: {
          data: this.defaultDates, // 使用默认日期
        },
        series: [{
          data: this.defaultPlannedFeedAmounts, // 使用默认投饲量
        }]
      });
        }
      }
    },
  };
  </script>
  
  <style scoped>
  /* 添加任何额外的样式 */
  </style>
  